﻿
@{
    ViewBag.Title = Resources.WebStringsWeb.WebTitle;
    Layout = "~/Views/Shared/_LayoutMobile.cshtml";
}

@section css {
    <link rel="stylesheet" href="~/Assets/vue/css/vant.css" />
    <script src="~/Assets/vue/js/vue3.js"></script>
    <script src="~/Assets/vue/js/vant4.js"></script>
    <style>
           @@font-face {
            font-family: "fff";
            src: url("~/Assets/vue/font/SourceHanSansSC-Regular-2.otf");
        }
        body {
            font-family: "fff";
        }
    </style>
}
<div>
    <header class="mui-bar mui-bar-nav">
        @*<a id="menu" class="mui-action-menu mui-icon mui-icon-plus mui-pull-right" href="MDrillFormAdd"></a>*@
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title" style="color:white;" ng-cloak>消防场所</h1>
    </header>
    <div class="mui-content">
        <div id="app" v-cloak>
            <!-- <van-popup
      v-model:show="showBottom"
      position="bottom"
      round
      :style="{ height: '90%' }"
    >
    <div style="padding-top: 20px;padding: 10px;box-sizing: border-box;width: 100%;height: 100%; border: 1px solid red;">
      <div v-for="e in chooseList" v-on:click="showPop(e)"  style="position: relative;margin-top: 10px;">
        <img v-for="es in e.PointList" style="width: 10px;height: 10px;background-color: red;border-radius: 4px;" :src="es.EquType.ImageInfo.FilePath" :style="{position:'absolute',left:es.X*100+'%',top:es.Y*100+'%'}"/>
        <img :src="e.ImageInfo.FilePath" alt="" style="width: 100%;height: 212px;border: 1px solid blue;" srcset="">
      </div>
    </div>
    </van-popup> -->
            <canvas v-show="false"
                    id="canvas"
                    style="width: 100%; height: 212px"></canvas>
            <van-popup v-model:show="showBottom1"
                       position="bottom"
                       round
                       :style="{ height: '90%' }">
                <div style="
            padding-top: 20px;
            padding: 10px;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
          ">
                    <div v-for="e in chooseList"
                         v-on:click="showPop(e)"
                         style="position: relative; margin-top: 10px">
                        <img v-for="es in e.PointList"
                             style="width: 10px; height: 10px; border-radius: 4px"
                             :src="es.EquType.ImageInfo.FilePath"
                             :style="{position:'absolute',left:es.X*100+'%',top:es.Y*100+'%'}" />
                        <img :src="e.ImageInfo.FilePath"
                             ref="test"
                             alt=""
                             style="width: 100%; height: 212px"
                             srcset="" />
                    </div>
                </div>
            </van-popup>
            <van-skeleton title :row="20" :loading="loading">
                <van-row>
                    <van-col span="24">
                        <van-search v-model="svalue"
                                    shape="round"
                                    show-action
                                    placeholder="请输入搜索关键词">
                            <template v-slot:action>
                                <div style="
                    width: 63px;
                    height: 32px;
                    background: #014da1;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: white;
                    border-radius: 12px;
                  ">
                                    搜索
                                </div>
                            </template>
                        </van-search>

                        <van-collapse v-model="activeNames"
                                      accordion
                                      v-on:change="collChange">
                            <van-collapse-item v-for="(e,i) in list1">
                                <template #title>
                                    <div style="
                      width: auto;
                      height: 100%;
                      display: flex;
                      align-items: center;
                    ">
                                        <div style="
                        width: 18px;
                        background-color: #014da1;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: white;
                        height: 18px;
                        border-radius: 50%;
                      ">
                                            {{i+1}}
                                        </div>
                                        <div style="margin-left: 8px">{{e.Name}}</div>
                                    </div>
                                </template>
                                <div style="
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                    align-items: center;
                  ">
                                    <div style="
                      width: 327px;
                      margin: 0 auto;
                      display: flex;
                      align-items: center;
                    ">
                                        <div v-for="es in e.ItemList"
                                             style="
                        display: flex;
                        align-items: center;
                        margin-right: 4px;
                      ">
                                            <img style="
                          width: 14px;
                          height: 14px;

                          margin-right: 4px;
                        "
                                                 :src="es.ImgUrl"
                                                 alt="" />
                                            <div style="font-size: 11px">
                                                {{es.TypeName}}：{{es.Count}}
                                            </div>
                                        </div>
                                    </div>
                                    <img :src="e.Map"
                                         v-on:click="showDot(e)"
                                         style="width: 327px; height: 168px; margin-top: 10px"
                                         alt="" />
                                </div>
                                <div style="
                    border-top: 2px #fafafa;
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    margin-top: 10px;
                    align-items: center;
                  ">
                                    <div v-for="e in list2"
                                         style="
                      width: 320px;
                      height: 43px;
                      display: flex;
                      justify-content: space-between;
                      align-items: center;
                    ">
                                        <div>{{e.Name}}</div>
                                        <div style="
                        flex: 1;
                        margin-left: 6px;
                        height: 1px;
                        border-top: 1px dashed #d8d8d8;
                      "></div>
                                        <van-icon style="transform: rotate(90deg)"
                                                  size="18"
                                                  v-on:click="cfloor(e.Id)"
                                                  name="ellipsis" />
                                    </div>
                                </div>
                            </van-collapse-item>
                        </van-collapse>
                    </van-col>
                </van-row>
                <van-popup v-model:show="showBottom"
                           position="bottom"
                           round
                           :style="{ height: '75%' }">
                    <div style="width: 100%; height: 100%; box-sizing: border-box">
                        <div style="
                width: 100%;
                height: 43px;
                display: flex;
                align-items: center;
                padding-left: 30px;
                box-sizing: border-box;
                border-bottom: 1px dashed #d8d8d8;
              ">
                            {{cobj.Name}}
                        </div>
                        <div style="height: calc(100% - 50px); overflow: scroll">
                            <div style="
                  width: 100%;
                  display: flex;
                  justify-content: center;
                  flex-direction: column;
                  align-items: center;
                  font-size: 12px;
                  color: #757c8c;
                  margin-top: 14px;
                ">
                                <div style="
                    width: 327px;
                    margin: 0 auto;
                    display: flex;
                    align-items: center;
                  ">
                                    <div v-for="e in cobj.ItemList"
                                         style="
                      display: flex;
                      align-items: center;
                      margin-right: 14px;
                    ">
                                        <img :src="e.ImgUrl"
                                             style="
                        width: 16px;
                        height: 16px;

                        margin-right: 4px;
                      "
                                             alt="" />
                                        <div style="font-size: 13px">
                                            {{e.TypeName}}：{{e.Count}}
                                        </div>
                                    </div>
                                </div>
                                <img :src="cobj.Map"
                                     v-on:click="showDot(cobj.MapList)"
                                     style="width: 327px; height: 168px; margin-top: 10px"
                                     alt="" />
                            </div>
                            <div>
                                <van-collapse v-model="activeNames1">
                                    <van-collapse-item v-for="(e,i) in list3">
                                        <template #title>
                                            <div style="
                          width: auto;
                          height: 100%;
                          display: flex;
                          align-items: center;
                        ">
                                                <div style="
                            width: 18px;
                            color: #014da1;
                            border: 1px solid #014da1;
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            height: 18px;
                            border-radius: 50%;
                          ">
                                                    {{i+1}}
                                                </div>
                                                <div style="margin-left: 8px">{{e.Name}}</div>
                                            </div>
                                        </template>
                                        <div style="
                        width: 100%;
                        display: flex;
                        justify-content: center;
                        flex-direction: column;
                        align-items: center;
                      ">
                                            <div style="
                          width: 327px;
                          margin: 0 auto;
                          display: flex;
                          align-items: center;
                        ">
                                                <div v-for="es in e.ItemList"
                                                     style="
                            display: flex;
                            align-items: center;
                            margin-right: 14px;
                          ">
                                                    <img style="width: 16px; height: 16px; margin-right: 4px"
                                                         :src="es.ImgUrl"
                                                         alt="" />
                                                    <div style="font-size: 13px">
                                                        {{es.TypeName}}：{{es.Count}}
                                                    </div>
                                                </div>
                                            </div>
                                            <img :src="e.Map"
                                                 v-on:click="showDot(e)"
                                                 style="width: 327px; height: 168px; margin-top: 10px"
                                                 alt="" />
                                        </div>
                                    </van-collapse-item>
                                </van-collapse>
                            </div>
                        </div>
                    </div>
                </van-popup>
            </van-skeleton>
        </div>
    </div>
</div>
@section js{
    <script src="~/Assets/js/mui.pullToRefresh.js"></script>
    <script src="~/Assets/js/mui.pullToRefresh.material.js"></script>
    <script src="~/Assets/vue/js/axios.js"></script>
    <script>

        mui.init({
            swipeBack: false,
            keyEventBind: {
                backbutton: false  //关闭back按键监听
            }
        });

    </script>
    <script type="module">
        import Request from "../../Assets/vue/js/request.js"
        const {
            createApp,
            ref,
            onMounted,
            h,
            reactive,
            toRefs,
            getCurrentInstance,
        } = Vue;
        const Composition = {
            setup() {
                const data = reactive({
                    list1: [],
                    list2: [],
                    list3: [],
                    proxy: "",
                    cobj: {},
                    ctx: "",
                    dpr: 1,
                    canvas: "",
                    chooseList: [],
                    url: "",
                    loading: true,
                    activeNames: [],
                    activeNames1: [],
                    svalue: "",
                    showBottom: false,
                    showBottom1: false,
                });
                function queryURLParams(url) {
                    const searchParams = window.location.search.substring(1).split("&");
                    const params = {};

                    for (const param of searchParams) {
                        const [key, value] = param.split("=");
                        params[key] = value;
                    }

                    return params;
                }

                const params = toRefs(data);
                const methods = {
                    init: () => {
                        let { id } = queryURLParams(window.location.href);
                        params.loading.value = true;
                        Request({
                            url: "/FireControl/getbuildingList",
                            method: "get",
                            params: {
                                Id: id,
                            },
                        }).then((res) => {
                            params.list1.value = res.Data;
                            params.loading.value = false;
                        });
                    },

                    cfloor: (id) => {
                        params.showBottom.value = true;

                        let obj = params.list2.value.find((e) => e.Id == id);
                        if (!obj.Map) {
                            return vant.showToast("暂无场所图");
                        }


                        console.log(obj)
                        params.cobj.value = obj;
                        Request({
                            url: "/FireControl/GetPlaceList",
                            method: "get",
                            params: {
                                FloorId: id,
                            },
                        }).then((res) => {
                            params.list3.value = res.Data;
                        });
                    },
                    // url 图片路径
                    loadImage(list) {
                        let s = [];
                        return new Promise((resolve, reject) => {
                            list.forEach(async (e, i) => {
                                const img = new Image();
                                img.setAttribute("crossOrigin", "anonymous");
                                img.src = e.bg;
                                img.onload = function () {
                                    params.ctx.value.drawImage(
                                        img,
                                        (params.canvas.value.width / params.dpr.value) * e.x,
                                        (params.canvas.value.height / params.dpr.value) * e.y,
                                        15,
                                        15
                                    );
                                    s.push(i);
                                    console.log(s);
                                    if (s.length == list.length) {
                                        resolve(true);
                                    }
                                };
                            });
                        });
                    },

                    loadBaseImage: (url) => {
                        return new Promise((resolve, reject) => {
                            const img = new Image();
                            img.setAttribute("crossOrigin", "anonymous");
                            img.src = url;
                            img.onload = () => {
                                const width = params.proxy.value.$refs.test[0].width;
                                const height = params.proxy.value.$refs.test[0].height;
                                params.canvas.value.width = width * params.dpr.value;
                                params.canvas.value.height = height * params.dpr.value;
                                params.ctx.value.scale(params.dpr.value, params.dpr.value);
                                params.ctx.value.drawImage(img, 0, 0, width, height);
                                // 当图像加载完成后进行resolve
                                resolve(img);
                            };
                            img.onerror = () => {
                                vant.showToast("图像加载失败");
                                reject(new Error("图像加载失败"));
                            };
                        });
                    },

                    drowImage: (url, list) => {
                        return new Promise(async (resolve, reject) => {
                            vant.showLoadingToast({
                                duration: 0,
                                forbidClick: true,
                                message: "数据加载中",
                            });
                            params.canvas.value = document.getElementById("canvas");
                            params.ctx.value = params.canvas.value.getContext("2d");

                            let res = await methods.loadBaseImage(url);
                            if (res) {
                                let ress = await methods.loadImage(list);
                                if (ress) {
                                    params.canvas.value.toBlob((blob) => {
                                        const imageUrl = URL.createObjectURL(blob);

                                        params.url.value = imageUrl;

                                        resolve(true);
                                    });
                                }
                            }
                        });
                    },

                    showDot: (e) => {
                        console.log(e, 'eee')
                        if (e.MapList) {
                            if (!e.Map) {
                                return vant.showToast("暂无场所图");
                            }

                        } else {
                            console.log(e)
                        }
                        params.showBottom1.value = true;
                        params.chooseList.value = e.MapList || e;
                    },


                    showPop: async (e) => {
                        let list =
                            e.PointList &&
                            e.PointList.map((es) => {
                                return {
                                    x: es.X,
                                    y: es.Y,
                                    bg: es.EquType.ImageInfo.FilePath,
                                };
                            });

                        if (list.length == 0) {
                            return vant.showToast("暂无标记点位");
                        }

                        let fres = await methods.drowImage(e.ImageInfo.FilePath, list);
                        if (fres) {
                            vant.closeToast();
                            vant.showImagePreview({
                                images: [params.url.value],
                                showIndex: false,
                                closeable: true,
                            });
                        }
                    },
                    collChange: (e) => {
                        let id = params.list1.value[e].Id;

                        Request({
                            url: "/FireControl/getFloorList",
                            method: "get",
                            params: {
                                BuildingId: id,
                            },
                        }).then((res) => {
                            params.list2.value = res.Data;
                        });
                    },
                };

                onMounted(() => {
                    params.dpr.value = 4
                    methods.init();
                    const { proxy } = getCurrentInstance();
                    params.proxy.value = proxy;
                });

                return {
                    // 返回对象给模板
                    ...params,
                    ...methods,
                };
            },
        };

        const vapp = createApp(Composition);
        vapp.use(vant.Lazyload);
        vapp.use(vant).mount("#app");
    </script>
}

